import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Tree, Icon, Skeleton, Modal, Divider, Empty, Button, message } from 'antd';
import { useBoolean } from '@umijs/hooks';
import cloneDeep from 'lodash/cloneDeep';
import ScrollBar from '@/components/ScrollBar';
import SlickTable from '@/components/SlickTable';
import request from '@/utils/request';
import AddJumpConfig from './AddJumpConfig';
import styles from '../index.less';
import Ikon from '@/components/Ikon';

const { TreeNode } = Tree;

function SetCondition({ size, visiable, close, versionSelectId }) {
  // 组织树数据
  const [TreeData, setTreeData] = useState([]);
  // 选中点击的值
  const [selectedKeysArr, setSelectedKeysArr] = useState([]);
  // 初始化加载组织树loading
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [tableLoading, setTableLoading] = useState(false);

  const { state, setTrue, setFalse } = useBoolean(false);
  const [deleteArr, setDeleteArr] = useState([]);

  // 初始化获取接口的Tree集合
  const queryTreeData = () => {
    setLoading(true);
    request('pmc/pms/PmOrderFlowNodeController/queryList', {
      data: {
        flowId: versionSelectId,
      },
    })
      .then(res => {
        if (res.success) {
          if (res.data.length > 0) {
            setTreeData(res.data);
          }
        }
      })
      .always(() => setLoading(false));
  };

  useEffect(() => {
    queryTreeData();
  }, []);

  const queryTable = () => {
    const flowNodeId = selectedKeysArr.toString();
    setTableLoading(true);
    request('pmc/pms/PmOrderFlowJumpController/queryList', {
      data: {
        flowNodeId,
      },
    })
      .then(res => {
        if (res.success) {
          setDataSource(res.data);
        } else {
          message.error(res.errMessage);
        }
      })
      .always(() => setTableLoading(false));
  };

  useEffect(() => {
    if (selectedKeysArr.toString()) {
      queryTable();
    }
  }, [selectedKeysArr]);

  // 选中节点
  const selectTreeNode = selectedKeys => {
    /* eslint-disable */
    selectedKeys.length > 0
      ? setSelectedKeysArr(selectedKeys)
      : setSelectedKeysArr(selectedKeysArr);
  };

  return (
    <Modal
      title="跃迁配置"
      width="800px"
      destroyOnClose
      visible={visiable}
      okText="保存"
      onCancel={close}
      footer={null}
    >
      <div className={styles.scroll_main}>
        <div className={styles.scroll_left}>
          <ScrollBar autoHide autoHeight autoHeightMax={size.height * 0.7}>
            <div style={{ height: size.height * 0.7, paddingRight: '8px' }}>
              <Skeleton active loading={loading}>
                {TreeData.length > 0 ? (
                  <Tree onSelect={selectTreeNode} selectedKeys={selectedKeysArr} defaultExpandAll>
                    {TreeData.map(item => (
                      <TreeNode title={item.flowNodeName} key={item.flowNodeId} />
                    ))}
                  </Tree>
                ) : (
                  <Empty />
                )}
              </Skeleton>
            </div>
          </ScrollBar>
        </div>
        <div
          className={styles.scroll_content}
          style={{ paddingLeft: '16px', borderLeft: '1px solid #e8e8e8' }}
        >
          <ScrollBar autoHide autoHeight autoHeightMax={size.height * 0.7}>
            <div style={{ height: size.height * 0.7 }} className={styles.set_conditionright}>
              {selectedKeysArr.length > 0 ? (
                <>
                  <div className="ant-detail-title">
                    <span>跃迁设置</span>
                    <span className="pull-right">
                      <Button
                        type="primary"
                        onClick={() => {
                          setTrue();
                        }}
                      >
                        新增
                      </Button>
                    </span>
                  </div>
                  <SlickTable
                    style={{ marginTop: 8 }}
                    rowKey={record => record.jumpId}
                    pagination={false}
                    dataSource={dataSource}
                    loading={tableLoading}
                    columns={[
                      {
                        title: '下一环节',
                        dataIndex: 'nextTacheCodeName',
                        ellipsis: true,
                      },
                      {
                        title: '表达式',
                        dataIndex: 'jumpParam',
                        ellipsis: true,
                      },
                      {
                        title: '操作',
                        align: 'center',
                        width: 100,
                        render: (text, record) => {
                          return (
                            <span>
                              <a
                                onClick={() => {
                                  request('pmc/pms/PmOrderFlowJumpController/delete', {
                                    method: 'GET',
                                    data: {
                                      jumpId: record.jumpId,
                                    },
                                  }).then(res => {
                                    if (res.success) {
                                      message.success('删除成功！');
                                      queryTable();
                                    } else {
                                      message.error(res.errMessage);
                                    }
                                  });
                                }}
                              >
                                删除
                              </a>
                            </span>
                          );
                        },
                      },
                    ]}
                  />
                </>
              ) : (
                <Ikon status="404" subTitle="抱歉，暂无属性跃迁设置" />
              )}
            </div>
          </ScrollBar>
        </div>
      </div>
      {state ? (
        <AddJumpConfig
          visiable={state}
          close={setFalse}
          flowNodeId={selectedKeysArr.toString()}
          queryTable={queryTable}
        />
      ) : null}
    </Modal>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(SetCondition);
